<template>
  <basic-container class="basic-box">
<!--    <el-container style="height: 100%;">-->
<!--      <el-aside class="el-aside-tree-container">-->
<!--        <menu-tree :Event="Event">-->
<!--        </menu-tree>-->
<!--      </el-aside>-->
<!--      <el-main class="rightMainBox">-->
<!--        <resource-table :Event="Event"></resource-table>-->
<!--      </el-main>-->
<!--    </el-container>-->
    <el-container>
      <el-aside width="200px">
        <div class="list-tree-box">
        <avue-tree class="filter-tree" :option="treeOption"  v-model="form" :data="menuTreeData" @node-click="nodeClick" @update="updateT" @save="rowSaveT"
                   @del="delnodeT">
        </avue-tree>
        </div>
      </el-aside>
      <el-main>
        <avue-crud
                :data="dataTabData"
                :option="option"
                v-model="obj"
                :page="page"
                @row-del="rowD"
                @current-change="currentChange"
                @size-change="sizeChange">
          <template slot-scope
                    slot="menuLeft">
            <el-button type="primary"
                       icon="el-icon-plus"
                       size="small"
                       plain
                       class="addBtn"
                       @click="addrecurse">新增</el-button>
          </template>
        </avue-crud>
<!--        新增资源-->
        <!-- 弹框 -->
        <el-dialog :visible.sync="dialogVisible"
                   class="dialogResech"
                   title="添加资源"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="70%">
          <avue-crud :option="optionD"
                     :data="resucedata"
                     ref="crud1"
                     v-model="formT"
                     :table-loading="loading"
                     @selection-change="handleSelectionChangeT"
                     :page="pageT"
                     @refresh-change="refreshChangeT"
                     @search-change="searchChangeT"
                     @search-reset="searchResetT"
                     @current-change="currentChangeT"
                     @size-change="sizeChangeT"
                     @on-load="onLoadT">
          </avue-crud>
          <span slot="footer"
                class="dialog-footer">

        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary"
                   @click="addrecurseData">新增</el-button>
      </span>
        </el-dialog>
      </el-main>
    </el-container>
  </basic-container>
</template>
<script>
import Vue from 'vue'
import menuTree from '@/components/menu/menuTree'
import resourceTable from '@/components/menu/table/resourceTable'
const Event = new Vue()
// import { getList, setAuthority, resourceDelete } from "@/api/admin/menu";
import {
  getList,
  delrowData,
  setAuthority,
  resourceDelete,
  getMenuTree,
  update,
  add,
} from "@/api/admin/menu";
import iconList from "@/config/iconList";
import {
    testSort,testGoodsSerial
} from '@/util/util';
export default {
  data () {
    return {
      Event,
      dataT:{},
      queryT:{},
      pageT: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      formT:{},
      dialogVisible:false,
      checkdata: [],
      resucedata: [],
      form:{},
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      obj: {},
      menuTreeData:[],
      treeOption:{
        dialogWidth: "70%",
        nodeKey: "id",
        size: "small",
        addBtn: true,
        editBtn: true,
        filter: false,
        delBtn: true,
        rowKey: 'menuId',
        formOption: {
            labelWidth: 100,
            query: {},
            loading: true,
            addBtn: true,
            saveBtn: true,
            // menuBtn: true,
            menuPostion: "right",
            submitBtn: true,
            emptyBtn: true,
            submitSize: "small",
            submitText: "保存",
            emptyText: "清空",
            emptySize: "small",
            column: [ {
              type: "input",
              label: "路由地址",
              span: 12,
              display: true,
              prop: "url",
              placeholder: "role",
              required: true,
              rules: [{
                required: true,
                message: "路由地址必须填写"
              }]
            },
              {
                label: "上级菜单",
                prop: "pcode",
                type: "tree",
                dicUrl: "/api/menu/listTree",
                hide: true,
                props: {
                  label: "name",
                  value: "code",
                  children: "children"
                },
                rules: [{
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "name"
                }]
              },
              {
                label: "菜单图标",
                prop: "icon",
                type: "icon-select",
                slot: true,
                iconList: iconList,
                searchMenuSpan:6,
                rules: [{
                  required: true,
                  message: "请选择菜单图标",
                  trigger: "click"
                }]
              },
              {
                label: "菜单编号",
                prop: "code",
                search: true,
                rules: [{
                  required: true,
                  message: "请输入菜单编号",
                  trigger: "blur"
                },
                {
                    validator: testGoodsSerial,
                    trigger: 'blur'
                },
                ]
              },
              // {
              //   type: "radio",
              //   label: "是否菜单",
              //   dicData: [{
              //     label: "是",
              //     value: "Y"
              //   },
              //     {
              //       label: "否",
              //       value: "N"
              //     }
              //   ],
              //   span: 12,
              //   valueDefault: "Y",
              //   prop: "menuFlag",
              // },
              {
                type: "input",
                label: "菜单排序",
                span: 12,
                display: true,
                prop: "sort",
                required: true,
                rules: [{
                  required: true,
                  message: "请输入菜单排序"
                },
                {
                    validator: testSort,
                    trigger: 'blur'
                },
                ],
              }
            ]
          },
        props:{
          labelText: "菜单名称",
          value: "menuId",
          label: "name",
          children: "children",
        }
      },
      data:[],
      dataTabData: [],
      optionD: {
        page: true,
        align: 'center',
        menuAlign: 'center',
        size: 'mini',
        excelBtn: false,
        addBtn: false,
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        editBtn: false,
        "searchBtn": false,
        "printBtn": false,
        "columnBtn": false,
        "refreshBtn": false,
        "menu": false,
        "filterBtn": false,
        delBtn: false,
        height: 'auto',
        // calcHeight: 380,
        rowKey: 'resourceId',
        searchMenuSpan:6,
        column: [
          {
            label: "资源名称",
            prop: "name",

          },

          {
            label: "模块名称",
            prop: "modularName",
            search: true,
          },
          {
            label: "app编码",
            prop: "appCode",
          },
          {
            label: "路由地址",
            prop: "url",
            search: true,
          },
          {
            label: "资源编号",
            prop: "code",
          },
        ]
      },
      option: {
        filterBtn: false,
        align: "center",
        menuAlign: "center",
        addBtn: false,
        editBtn: false,
        border: true,
        cellBtn: false,
        height:380,
        calcHeight:'auto',
        checkbox: false,
        index: true,
        "refreshBtn": false,
        "columnBtn": false,
        menuWidth: 100,
        column: [
          {
            label: "资源名称",
            prop: "name",
          },
          {
            label: "模块名称",
            prop: "modularName",
          },
          {
            label: "路由地址",
            prop: "url"
          },
          {
            label: "资源编号",
            prop: "code"
          }
        ]
      }
    }
  },
  // components: {
  //   menuTree,
  //   resourceTable
  // },
  created(){
    // this.data=this.data0;
    this.getMenuTrees()
  },
  methods: {
    //表格删除
    rowD (row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
              .then(() => {
                return resourceDelete(row.resourceId);
              })
              .then(() => {
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
                  this.getTre()
              });
    },
    //弹框的页面加载
    onLoadT (pageT, params = {pcode:this.dataT.pcode},done) {
      getList(pageT.currentPage, pageT.pageSize,Object.assign(params, this.query)).then(res=>{
        if(done){
          done();
        }
        // console.log(res)
        if(res.status==200){
          this.resucedata = [];
          this.pageT.total=res.data.count
          this.resucedata = res.data.data;
        }
      })
    },
    // 监听pagenum改变
    currentChangeT (currentPage) {
      this.pageT.currentPage = currentPage;
      console.log(this.query)
      this.onLoadT(this.pageT);
    },
    //  监听pageSize改变
    sizeChangeT (pageSize) {

      this.pageT.pageSize = pageSize;
      this.onLoadT(this.pageT);
    },
    //搜索(搜索，可以搜索任意资源但不带menuId)
    searchChangeT (params,done) {
      this.query = params;
      // this.query.menuId=this.dataT.menuId
      this.query.pcode =this.dataT.pcode;
        this.pageT.currentPage = 1;
      this.onLoadT(this.pageT, this.query,done);
    },
    searchResetT () {
        // debugger
        this.query = {};
        this.onLoadT(this.pageT);
    },
    //清空
    refreshChangeT () {
      this.onLoadT(this.pageT);
    },
    //弹窗关闭
    closeDialog () {
      this.checkdata = [];
      this.dialogVisible = false;
      this.pageT.currentPage = 1;
      this.$refs.crud1.searchReset();
    },
    //弹框添加
    addrecurseData () {
      if(this.checkdata.length>0){
        //点击确认新增资源
        let obj = {
          menuId: this.dataT.menuId,
          resourceArray: this.checkdata.map(item => {
            return item.resourceId;
          })
        };
        setAuthority(obj).then(res => {
          if (res.status == 200) {
            if (res.data.code == 500) {
              this.$message.error(res.data.message);
            }
            this.data = this.data.concat(this.checkdata);
            this.getTre();
          }
        });
        console.log(this.checkdata);
        this.dialogVisible = false;
        this.checkdata = [];
        this.$refs.crud1.toggleSelection();
        console.log(this.checkdata);
      }
      else{
        this.$message.error('请先选择你要添加的资源');
      }
    },
    // beforeOpenT (done, type) {
    //   if (["edit", "view"].includes(type)) {
    //     getList(this.form.modularName).then(res => {
    //       this.resucedata = [];
    //       this.form = res.data.data;
    //     });
    //   }
    //   done();
    // },
    //多选
    handleSelectionChangeT (data) {
      this.checkdata = data;
    },
    //新增节点
    //删除
    delnodeT(data,loading, done) {
      delrowData(data.menuId).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.getMenuTrees();
          location.reload()
          done();
        }
      });
    },
    // 新增节点方法
    rowSaveT(row, loading, done) {
		console.log("4864")
      this.form.pid=row.menuId
      this.form.pcode = row.code
      this.form.pcodes=row.pcodes
      this.form.menuFlag = "Y"
      add(this.form).then(res => {
        console.log(res)
        //刷新当前页面========================================================
        // this.onLoadT(this.page);
          if(res.data.success){
              this.$message({
                  type: "success",
                  message: "新增成功!"
              });
              this.getMenuTrees();
              location.reload()
              done();
          }
          else if(res.data.code==500){
              done();
          //    菜单编号重复状态判断
          }else if(res.data.code==400){
               done();
          }

      },
        error => {
            done();
            console.log(error)
        }
      );
    },
    //点击编辑
    updateT(data,node,done,loading){
      this.form.menuFlag = "Y"
      update(this.form).then(res => {
        //刷新当前页面========================================================
        // this.onLoadT(this.page);
        //刷新当前页面
        if(res.data.success){
            this.$message({
                type: "success",
                message: "修改成功!"
            });
            this.getMenuTrees();
            location.reload()
            done();
        }
        else if(res.data.code==500){
          this.$message({message:res.data.message, type:'error'});
          window.setTimeout(function () {location.reload()},900);

        }

      },
        error => {
            done();
            console.log(error)
        }
      );
    },
    //点击表格新增
    addrecurse () {
      if(Object.keys(this.dataT).length == 0){
        this.$message({
          message:'请选择菜单',
          type:'error'
        })
      }else{
        this.dialogVisible = true;
        this.onLoadT(this.pageT);
      }
      // this.getListData();
    },
    //请求树结构
    getMenuTrees(){
      getMenuTree().then(res => { //初始化请求树结构数据
        if (res.status == 200) {
          this.menuTreeData = res.data.data;
          console.log(res.data.data)
        }
      })
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage;
      this.getTre()
    },
    //  监听pageSize改变
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
     this.getTre()
    },
    //获取树对应的数据
    getTre(){
      let obj={}
      obj.menuId=this.dataT.menuId
      obj.pcode=this.dataT.pcode
      getList(this.page.currentPage, this.page.pageSize, obj).then(res=>{
        if(res.status==200){
          this.dataTabData=res.data.data
          this.page.total=res.data.count
        }
      })
    },
    nodeClick(data){
      this.dataT=data
      this.getTre()
    }
  }
};
</script>

<style scoped>
  .list-tree-box {
    width: 100%;
    height: 450px;
    max-height: 450px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
  .filter-tree {
    flex: 1;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    overflow-y: scroll;
  }
.basic-box {
  width: 100%;
  height: 100% !important;
}
.basic-container .el-card {
  height: 100%!important;
}
.el-card.is-always-shadow,
.el-card__body {
  width: 100%;
  height: 100%!important;
}
.el-container {
  height: 100% !important;
  padding-bottom: 5px;
}
.table-list {
  max-height: 560px;
  min-height: 560px;
}
.el-aside-tree-container {
  width: 210px !important;
  height: 100% !important;
  display: flex;
  flex-flow: column nowrap;
}
</style>
